<template>
  <view class="p-wrapper">
    <input class="p-input" type="number" v-model="info" :focus="vdata.isFoucs" :maxlength="num" @input="inputChange" />
    <view class="p-main" :style="{ margin: margin }">
      <div class="p-number flex-center" v-for="v in num" :key="v" :class="{ 'p-active': v <= info.length }"></div>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
const emits = defineEmits(['inputChange'])
const props = defineProps({
  focus: { type: Boolean, default: false }, //是否自动获取焦点 默认false
  num: { type: Number, default: 6 }, //密码框数量
  margin: { type: String }, //边距
})
const info = ref('')

const vdata = reactive({
	isFoucs: false
})

onMounted(() => {
	// 解决无法聚焦的问题，  怀疑页面没有渲染好导致。 nextTick也不好使。 
	// 偶尔出现： 1. 键盘不弹出， 2.键盘弹出， 输入无法聚焦的input. 
	if(props.focus){
		setTimeout(() => {vdata.isFoucs = true}, 500)
	}
})


const clearInput = () => (info.value = '')
const inputChange = () => {
  emits('inputChange', info.value)
}


defineExpose({ clearInput })
</script>

<style lang="scss" scoped>
.p-wrapper {
  position: relative;
  width: 100%;
  height: 80rpx;
  overflow: hidden;
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 95rpx;
    height: 100%;
  }
  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 95rpx;
    height: 100%;
  }
  .p-input {
    position: absolute;
    top: 10%;
    left: -100vw;
    right: 0;
    opacity: 0;
    color: transparent;
    caret-color: transparent;
  }
  .p-main {
    display: flex;
    justify-content: space-between;
    margin: 0 95rpx;
    .p-number {
      width: 80rpx;
      height: 80rpx;
      border-radius: 12rpx;
      background-color: #f2f2f2;
    }
    .p-active::after {
      content: '';
      display: block;
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background-color: #000;
    }
  }
}
</style>
